<template>
    <div style="margin:0 auto!important">
        <template v-if="data.length == 0">
            <el-empty :image-size="200" description="暂无成绩" />
        </template>
        <template v-else>
            <div id="main" style="width:900px;height:600px;"></div>
            <p style="font-size: 20px;font-weight: 600;text-align: center;">分数</p>
        </template>
    </div>
</template>

<script setup name="fractionalGraph">
import * as echarts from 'echarts';
import { getFractionalCurve } from '@/api/knowledgeLearn/online/practiceInClass.js';
const data = ref([]);
const yAxis = ref([]);
const ynum = ref('');
const ymax = ref('');
const xnum = ref('');
const xQualified = ref();
const xExcellent = ref();


onMounted(() => {
    // 获取分数数据
    getFractionalCurve().then(res => {
        yAxis.value = res.data.y ? res.data.y : [];
        data.value = new Array();
        for (var i = 0; i <= 100; i++) {
            data.value.push(i);
        }
        ymax.value = res.data.ymax;
        if(res.data.ymax){
            if(res.data.ymax<5){
                ymax.value = res.data.ymax+1;
            }else if(5<=res.data.ymax<50){
                ymax.value = res.data.ymax+5;
            }else if(50<=res.data.ymax<300){
                ymax.value = res.data.ymax+10;
            }else if(300<=res.data.ymax<500){
                ymax.value = res.data.ymax+20;
            }else if(500<=res.data.ymax<1000){
                ymax.value = res.data.ymax+50;
            }else{
                ymax.value = res.data.ymax+100;
            }
        }
        ynum.value = res.data.ynum;
        xnum.value = res.data.xnum;
        xQualified.value = res.data.xqualified;
        xExcellent.value = res.data.xexcellent;
        if (yAxis.value.length > 0) {
            nextTick(() => {
                echarts.init(document.getElementById('main')).dispose();
                var myChart = echarts.init(document.getElementById('main')); // 基于准备好的dom，初始化echarts实例
                myChart.setOption({ // 绘制图表
                    tooltip: {trigger: 'axis'},
                    xAxis: {
                        name: '%',
                        data: data.value,
                    },
                    yAxis: {
                        type: 'value',
                        name: '人数',
                        minInterval:1,
                        max: ymax.value,
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            data: yAxis.value,
                            color: ['#7289ab'],
                            markPoint: {
                                data: xnum.value ? [
                                    { name: '您的位置', value: '您的位置', xAxis: Number(xnum.value), yAxis: ynum.value },
                                ] : false,
                            },
                        },
                        {
                            type: 'line',
                            markLine: {
                                silent: true, // 鼠标移动到标记线上无操作
                                symbol: "none",
                                data: [
                                    {
                                        xAxis: Number(xQualified.value), // 分割线的位置
                                        label: {
                                            show: true, // 是否展示文字
                                            color: "red",
                                            formatter: "合格线",
                                        },
                                        lineStyle: {
                                            color: "red",
                                            width: 1, // 0 的时候可以隐藏线
                                            type: "solid" // 实线，不写默认虚线
                                        }
                                    },
                                    {
                                        xAxis: Number(xExcellent.value), // 分割线的位置
                                        label: {
                                            show: true, // 是否展示文字
                                            color: "red",
                                            formatter:  '优秀线',
                                        },
                                        lineStyle: {
                                            color: "red",
                                            width: 1, // 0 的时候可以隐藏线
                                            type: "solid" // 实线，不写默认虚线
                                        }
                                    },
                                ]
                            },
                        }
                    ],
                    dataZoom: {
                        xAxisIndex: 0, //这里是从X轴的0刻度开始
                        show: true, //是否显示滑动条，不影响使用
                        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 25, // 一次性展示6个。
                    }

                });
            })
        }
    })

})
</script>

<style scoped lang="scss"></style>